<template>
  <div class="qualitytable-container mainContent">
    <!-- 路径 -->
    <pathTracking :path='path' />
    <div class="qualitytable-content">
        <!-- 搜索框，处理按钮 -->
        <div class="scancode-form">
            <el-form ref="form">
                <el-form-item label="条码/包码">
                    <el-input v-model="barcode" @change="searchByCode"></el-input>
                </el-form-item>
                <div class="normal-btn-group">
                    <div v-for='(item, key) in btnsList' :key='key' :class="item.class" @click="openDialog(item,barcode)">
                        <img src="@/assets/img/form_checkboxes_checked.png" v-if="item.checked">
                        <img src="@/assets/img/form_checkboxes_unchecked.png" v-else>
                        {{item.level}}
                    </div>
                </div>
            </el-form>
        </div>
        <!-- 基本信息 -->
        <div class="qualitytable-basic-info">
            <el-row>
                <div class="common-table-title">
                    <div class="common-table-icon"></div>
                    <div class="common-table-fl">基本信息</div>
                </div>
            </el-row>
            <div class="basic-info-cont">
                <ul class="basic-info-ul">
                    <li class="basic-info-item" v-for="(basicItem, index) in basicInfoData" :key='index'>
                        <div class="basic_items" v-for='(ele, indicate) in basicItem' :key='indicate'>
                            <span>{{ele.key}}</span>
                            <span style="color: #222222" :title="ele.value">{{ele.value}}</span>
                        </div>
                    </li>
                </ul>
                <div class="basic-info-img">
                    <img v-if="photoUrl" :src="photoUrl" alt="">
                    <img v-else src="@/assets/img/dr.jpg" alt="">
                    
                </div>
            </div>
        </div>
        <!-- 关联的订单 -->
        <div class="qualitytable-table">
            <el-row>
                <div class="common-table-title">
                    <div class="common-table-icon"></div>
                    <div class="common-table-fl">关联的订单</div>
                </div>
            </el-row>
            <el-row class="common-table-con">
                <el-table
                    :data="documentsData"
                    max-height="550"
                >
                    <el-table-column
                        v-for="(ele, index) in associatedDocuments" 
                        :key="index"
                        :prop="ele.prop"
                        :label="ele.label"
                        :width="ele.width"
                        align='center'
                    >
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
        <!-- 质检记录 -->
        <div class="qualitytable-table">
            <el-row>
                <div class="common-table-title">
                    <div class="common-table-icon"></div>
                    <div class="common-table-fl">质检记录</div>
                </div>
            </el-row>
            <el-row class="common-table-con">
                <el-table
                    :data="qualityRecordData"
                    max-height="550"
                >
                    <el-table-column 
                        v-for="(ele, index) in supplierQualityRecord" 
                        :key="index"
                        :prop="ele.prop"
                        :label="ele.label"
                        :width="ele.width"
                        align='center'
                    >
                        <template slot-scope="scope">
                            <div>
                                {{translateData(scope.row, ele)}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
    </div>
    <!-- 弹出窗 -->
    <badReasonPopup
        ref="badReasonPopup"
        :responseInfo='responseInfo'
        @updateInfo='searchByCode'
    />
  </div>
</template>

<script>
import { getInfoByCode, setPass, getBadReason } from './axios'
// 数据
import pagedata from './datas.js'
import pathTracking from '@/components/common/pathTracking'
import badReasonPopup from './badReasonPopup'
import { rejects } from 'assert';
export default {
    name: 'qualitytable',
    data () {
        return {
            path: ['供应商管理', '质检管理', '质检记录'],
            // 条码
            barcode: '',
            // 请求回来的信息
            responseInfo: {},
            // 基本信息
            basicInfoData: pagedata.basicInfoData,
            // 关联单据项
            associatedDocuments: pagedata.associatedDocuments,
            // 关联单据项对应内容
            documentsData: [],
            // 质检记录项
            supplierQualityRecord: pagedata.supplierQualityRecord,
            // 质检记录项对应内容
            qualityRecordData: [],
            // 三个按钮
            btnsList: pagedata.btnsList,
            statusList: ['质检中', '合格', '不合格', '降级入库'],
            photoUrl:''//款式图片
        }
    },
    computed: {
        lang () {
            return this.$t('lang')
        }   
    },
    components: {
        pathTracking,
        badReasonPopup
    },
    async mounted() {
        
    },
    methods: {
        // 搜索框内容变化，根据code查询信息
        searchByCode() {
            if(!this.barcode.length) {
                this.responseInfo={}
                return false
            }
            this.$ajax({
                method: 'get',
                url:`${this.apiTest}/sale/saleGoodsInfo/getGoodsMasterAndGoodsInfo?batchNo=${this.barcode}`
            }).then(res=>{
                let data = res.data
                if(data.status==200&&data.result){
                    let result = data.result
                    //拼接字段处理
                    try{
                        result.minimumRabbet_theBiggestRabbet=`${result.minimumRabbet||''}${result.theBiggestRabbet||''}`
                        result.minimumWeightInGold_maximumGoldWeight=`${result.minimumWeightInGold||''}${result.maximumGoldWeight||''}`
                        result.diameterMinimum_maximumDiameter=`${result.diameterMinimum||''}${result.maximumDiameter||''}`
                    }catch(err){
                        console.log(err)
                    }
                    
                    this.responseInfo=result
                    this.updateData(result)
                    return
                }
                this.$message.err(data.msg||'查询失败')
            })
            // let baseInfo = await getInfoByCode(this.barcode);
            // if(baseInfo && baseInfo.data.status === 200){
            //     if(baseInfo.data.result) {
            //         this.responseInfo = baseInfo.data.result
            //         this.updateData(baseInfo.data.result)
            //     }else {
            //         this.$message({
            //             showClose: true,
            //             message: '查询失败',
            //             type: 'error'
            //         });
            //     }
            // }else {
            //     this.$message({
            //         showClose: true,
            //         message: '查询失败',
            //         type: 'error'
            //     });
            // }
        },
        // 更新data中的数据
        // param(data)通过条码查询到的信息
        updateData(data) {
            let tempArr = pagedata.basicInfoData;
            let pushVal = (tempArr) => {
                Array.isArray(tempArr)
                ?
                tempArr.map(ele => {
                    pushVal(ele)
                })
                :
                (tempArr.value = data[tempArr.alias] || '暂无')
            }
            pushVal(tempArr)
            this.documentsData = [data.sapPurchaseOrder]
            this.qualityRecordData = data.supplierQualityRecord
        },
        // 打开弹出框 
        openDialog(item,barcode) {
            //判断是否有查询信息
            if(!Object.keys(this.responseInfo).length){
                this.$message.error('无条码信息')
                return 
            }
            this.clickedBtn = item.value; 
            this.$refs.badReasonPopup.openDialog(item,barcode)
        },
        translateData(data, item) {
            if(item.prop === "status") {
                return this.statusList[data[item.prop]]
            }
            return data[item.prop]
        }
    }
}
</script>
<style scoped>
    .basic_items{
        min-width: 10rem;
        overflow: hidden;    
        text-overflow:ellipsis;    
        white-space: nowrap;
    }
    .common-table-con{
        border-radius: 0 0 8px 8px;
        padding-bottom: 1.9rem;
    }
    .qualitytable-content{
        width: 100%;
        padding: 2.4rem;
        background-color: #F3F3F3;
        box-sizing: border-box;
    }
    .qualitytable-content .el-form-item{
        margin-top: 2.4rem;
    }
    .normal-btn-group{
        margin-top: 2.4rem;
        margin-left: 4.1rem;
    }
    .qualitytable-basic-info{
        margin-top: 2.4rem;
    }
    .scancode-form .el-form{
        display: flex;
    }
    .basic-info-ul{
        width: 75%;
        height: 100%;
        padding-left: 1.6rem;
        box-sizing: border-box;
        background-color: #fff;
        padding-bottom: 2.4rem;
        border-radius: 0 0 8px 8px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    .basic-info-cont{
        width: 100%;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        padding-right: 4rem;
        background-color: #fff;
        min-height: 27rem;
        height: 29rem;
        border-radius: 0 0 8px 8px;
    }
    .qualitytable-table{
        margin-top: 2.4rem;
    }
    .basic-info-img{
        width: 21%;
        height: 0;
        padding-bottom: 21%;
        background-color: #fff;
        position: relative;
        border-radius: .4rem;
        border: solid 1px #cccccc;
    }
    .basic-info-img img{
        position: absolute;
        left: 7%;
        top: 7%;
        width: 86%;
        box-sizing: border-box;
        display: block;
    }
    .basic-info-ul .basic-info-item{
        width: 24%;
        height: 2.9rem;
        line-height: 2.9rem;
        font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
        font-size: 1.4rem;
        color: #888888;
        padding-left: 1.6rem;
        box-sizing: border-box;
        float: left;
    }
</style>